<template>
  <div class="Inform">
    <div id="components-layout-demo-basic">
      <div class="home">
        <a-row>
          <a-col type="flex" justify="center" align="top" :span="24">
            <img :src="img" alt="" style="background-color: #4822bc" />
          </a-col>
          <a-col class="nav" type="flex" justify="center" align="top" :span="24">
            <div class="layout">
              <a-col class="left" type="flex" justify="flex-start" align="top" :span="17">
                <span class="ab">玛卡·巴卡</span>
                <router-link to="/" class="fl"></router-link>
                <ul class="fl">
                  <li v-for="item in ul_left" :key="item.id">
                    <a :href="item.url == '' ? 'javascirpt:void(0)' : item.url">
                      <span>{{ item.text }}</span>
                      <a-badge
                        count="new"
                        :class="item.type"
                        v-if="item.type == 'icon' ? true : false"
                      />
                      <em data-lg-tj-id="1m2f" data-lg-tj-no="idnull"></em>
                    </a>
                  </li>
                </ul>
              </a-col>
              <a-col class="right" type="flex" justify="flex-start" align="top" :span="7">
                <!-- <router-link to="/" class="rl"></router-link> -->
                <ul class="rl">
                  <li v-for="item in ul_right" :key="item.id">
                    <a
                      :class="item.type ? item.type : ''"
                      :href="item.url == '' ? 'javascirpt:void(0)' : item.url"
                    >
                      <span>{{ item.text }}</span>
                    </a>
                  </li>
                  <template>
                    <div>
                      <div>
                        <a-avatar :size="20" icon="user" />
                      </div>
                    </div>
                  </template>
                </ul>
              </a-col>
            </div>
          </a-col>
        </a-row>
      </div>

      <div class="layout">
        <a-layout-header style="height: 100px"><Header></Header></a-layout-header>
        <a-layout>
          <a-layout-content style="height: 500px"><Content></Content></a-layout-content>
        </a-layout>
        <a-layout-footer><Footer></Footer></a-layout-footer>
      </div>
    </div>
  </div>
</template>
<script scoped>
import Header from "../../components/index/InformHeader.vue";
import Content from "../../components/index/InformBody.vue";
import Footer from "../../components/index/InformFooter";
export default {
  name: "Qiye",
  data() {
    return {
      img: "https://img.zcool.cn/community/01ff655562b7ca0000009c50030516.jpg@2o.jpg",
      logo:
        "https://www.lgstatic.com/lg-www-fed/common/widgets/header_c/modules/topbar/img/sprite_361857f.png",
      ul_left: [
        {
          type: "suggestCity",
          text: "全国站",
          url: "/",
          icon_isShow: true,
        },
        {
          type: "tab-active",
          text: "一个充满趣味与快乐的网站",
          url: "/",
        },
        /* {
          type: "",
          text: "首页二",
          url: "/indexT",
        },
        {
          type: "",
          text: "企业",
          url: "/qiye",
        },
        {
          type: "",
          text: "人才",
          url: "/talent",
        },
        {
          type: "",
          text: "通知",
          url: "/Inform",
        }, */
      ],

      ul_right: [
        {
          type: "sc",
          text: "上传附件简历",
        },
        {
          type: "login",
          text: "登录",
          url: "/log",
        },
        {
          type: "resgin",
          text: "注册",
          url: "/log",
        },
      ],
    };
  },
  components: {
    Header,
    Content,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
#components-layout-demo-basic {
  text-align: center;
  background-image: url(https://img.zcool.cn/community/01ff655562b7ca0000009c50030516.jpg@2o.jpg);
}
.a-layout-header {
  height: 150px;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #f0f2f5;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  /* background: #bbe93b; */
  color: #fff;
  line-height: 120px;
}
#components-layout-demo-basic .ant-layout-content {
  /* background: rgb(78, 233, 16); */
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
img {
  height: 80px;
  object-fit: cover;
}
.nav {
  width: 100%;
  height: 40px;
  background-color: #fff;
}
.nav .layout {
  height: 100%;
  // border: 1px solid red;
}
.nav .layout > .left {
  height: 100%;
}
span.ab {
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
  /* position: relative; */
  float: left;
  margin-top: 7px;
  margin-left: 9px;
}
.nav .layout > .left > ul {
  margin-left: 34px;
}
.nav .layout > .left > ul > li {
  float: left;
}
.nav .layout > .left > ul > li > a {
  display: inline-block;
  color: #1c1d20 !important;
  padding: 8px 14px;
}
.nav .layout > .left > ul > li > a > span:hover {
  color:#1890FF;
}
.nav .layout > .left > ul > li > a.suggestCity {
  color: #0dca9f !important;
}
.nav .layout > .left > ul > li > a.suggestCity > em {
  position: absolute;
  height: 20px;
  width: 6px;
  border-width: 5px;
  border-style: solid;
  border-color: #5f646d transparent transparent;
  left: 134px;
  top: 18px;
}
.nav .layout > .left > ul > li > a.tab-active {
  color: #ffffff !important;
  background-color: #24282c;
}
a.suggestCity {
  margin-right: 14px;
}

.nav .layout > .left > ul > li > a > .ant-badge {
  position: absolute;
  top: 2px;
  left: 506px;
}
.nav .layout > .left > ul > li > a > .ant-badge.icon {
  width: 30px;
  height: 8px;
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav .layout > .left > ul > li > a > .ant-badge.icon > .ant-scroll-number {
  width: 30px !important;
  height: 8px !important;
  display: inline-block;
}

.nav .layout > .right {
  height: 100%;
}
.nav .layout > .right > a {
  display: inline-block;
  width: 43px;
  height: 40px;
}
.nav .layout > .right > ul {
  margin-right: -16px;
}
.nav .layout > .right > ul > li {
  float: left;
}
.nav .layout > .right > ul > li > a {
  display: inline-block;
  color: #1c1d20 !important;
  padding: 8px 18px;
}
.nav .layout > .right > ul > li > a > span:hover,
span.ant-avatar.ant-avatar-circle.ant-avatar-icon[data-v-fae5bece]:hover {
  color:#1890FF;
}
.login::after {
  content: "";
  width: 1px;
  height: 14px;
  background-color: #575050;
  margin: 0.3em;
  position: absolute;
  top: 8px;
  right: 170px;
}
a.login {
  margin-left: 6px;
}
a.resgin {
  margin-left: -13px;
}
a.sc {
  position: relative;
  right: 8px;
}
span.ant-avatar.ant-avatar-circle.ant-avatar-icon {
  position: relative;
  top: 6px;
  right: 180px;
}
span.ant-avatar.ant-avatar-circle.ant-avatar-icon {
  background-color: rgb(206, 199, 199);
  color: #24282c;
}
img {
  width: 100%;
}

//public样式
* {
    margin: 0;
    padding: 0;
}
html,body {
    width: 100%;
    height: 100%;
}
li {
    list-style-type: none;
}
a {
    color: black !important;
}
.layout {
    width: 1226px;
    margin: 0 auto;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
</style>
